import React, { Component } from 'react';
import Banner from '@/components/Home/Banner';
import axios from 'axios';
import aa from '@/assets/icon_title.png';
import './index.scss'

class QingShe extends Component {
  constructor(props){
    super(props)
    this.state = {
      shoplist : []
    }

  }
  componentWillMount() {
    axios.get('./2.json').then((response) => {
      var result = response.data;
      // console.log(response.data);
      this.setState({
        shoplist : result
      })
    })
  }
  render() {
    let shoplist = this.state.shoplist;
    console.log(shoplist);
    return (
      <div className="qingshe">
        <Banner></Banner>
        <div className="list-items">
          <h2 className="carry">
            <span><img src={aa} alt=""/></span>
            <span className="c_head">今日特惠</span>
          </h2>
          <a href="http://h5.jumei.com/product/detail?type=global_deal&item_id=ht181024p1677151t1&selltype=custom&selllabel=baby_0527" className="carry-tejia">
            <img src="http://mp6.jmstatic.com/mobile/card_material/item_1654_2048_1024-ipad2048_1546411853.jpeg?imageView2/2/w/640/q/90" alt=""/>
          </a>
        </div>
        <div className="list-items">
          <h2 className="carry">
            <span><img src={aa} alt=""/></span>
            <span className="c_head">今日热销品牌</span>
          </h2>
          <a href="http://h5.jumei.com/product/detail?type=global_deal&item_id=ht181024p1677151t1&selltype=custom&selllabel=baby_0527" className="carry-tejia">
            <img src="http://mp6.jmstatic.com/mobile/card_material/item_0_2048_1024-ipad2048_5c2747e1e18c7.jpg?t=1546078178&imageView2/2/w/640/q/90" alt=""/>
          </a>
          <ul className="today_ul">
            <li>
              <a href="http://h5.jumei.com/s/act/my_a2_190102app.html?fp=home&fpa=baby_0527" className="today-tejia">
                <img src="http://mp5.jmstatic.com/mobile/card_material/item_0_1024_1024-ipad2048_5c2747f08e083.jpg?t=1546078192&imageView2/2/w/640/q/90" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1546066549.jpeg?imageView2/2/w/320/q/90" className="today-tejia">
                <img src="http://mp5.jmstatic.com/mobile/card_material/item_0_1024_1024-ipad2048_5c2748012c35e.jpg?t=1546078209&imageView2/2/w/640/q/90" alt=""/>
              </a>
            </li>
          </ul>
        </div>
        <div className="list-items">
          <h2 className="carry">
            <span><img src={aa} alt=""/></span>
            <span className="c_head">精选活动</span>
          </h2>
          <ul className="tuan-list">
          {
            shoplist.map((item,index) => {
              return(
                <li key={index}>
                <a href="http://www.baidu.com" className="clearfix">
                  <div className="list-img">
                    <img src={item.image_url_set.main['320']} alt=""/>
                    <span className="list-img-manjian">{item.discount_string}</span>
                  </div>
                  <div className="list-info">
                    <h2>{item.title}</h2>
                    <span>仅剩03天14小时00分</span>
                  </div>
                  <div className="list-logo">
                    <img src={item.image_url_set.brand['320']} alt=""/>
                  </div>
                </a>
              </li>
              )
            })
            }
          </ul>
        </div>
      </div>
    );
  }
}

export default QingShe;
